<template>
  <header class="header">
    <h1>todos</h1>
    <input
      v-model.trim="msg"
      @keyup.enter="addEvent"
      class="new-todo"
      placeholder="What needs to be done?"
      autofocus
    />
  </header>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    ...mapMutations('todo', ['addItem']),
    addEvent () {
      // 判断是否为空，为空不处理
      if (this.msg === '') {
        return
      }
      // this.$store.commit('addItem', {
      //   id: Date.now(),
      //   name: this.msg,
      //   done: false
      // })
      // 调用mutations实现添加
      this.addItem({
        id: Date.now(),
        name: this.msg,
        done: false
      })
      // 添加成功清空输入框内容
      this.msg = ''
    }
  }
}
</script>
<style lang="less" scoped></style>
